<template>
   <div class="app">
      <h1>{{ msg }},学生姓名是:{{ studentName }}</h1>
      <!--通过绑定一个自定义事件实现了子给父传递数据(自定义事件绑在子组件上) 第一种写法使用@或v-on-->
      <!--once代表改事件只执行一次-->
<!--      <Student @demo="demo" @getStudentName="getStudentName"/>-->
      <!--第二种写法使用ref绑定事件--->
      <Student ref="student" />
      <!--通过父组件给子组件传递函数类型的props实现了子给父传递数据-->
      <School :getSchoolName="getSchoolName" @click.native="native"/>
   </div>
</template>

<script>
import Student from "@/components/Student";
import School from "@/components/School";
export default {
  name: "App",
  components:{
    School,
    Student,
  },
  data(){
    return {
      msg: 'helloこんにちは',
      studentName:''
    }
  },
  methods:{
    getSchoolName(name){
      console.log(`app收到了学校名,${name}`);
    },
    getStudentName(name,...params){
      console.log(name,params)
    },
    demo(){
      console.log('demo事件被触发了');
    },
    demo1(){
      console.log('demo12121事件被触发了');
    },
    native(){
      alert('1')
    }
  },
  mounted() {
    //可以通过ref拿到组件实例对象
    // console.log(this.$refs.student);
    this.$refs.student.$on('atguigu',this.demo)
    this.$refs.student.$on('demo1',this.demo1)
  }
}
</script>

<style>
   /*
   全局的样式是不需要加scoped
   全局共享
   */
   .app{
     background: gray;
     padding: 5px;
   }
</style>


